<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="text/javascript">

    // 需求：页面上有6个按钮，点击执行事件
    // a b c => top
    // d e f => banner

////////////////////如果不用单例模式，很复杂，而且相互之间不可以通信⬇////////////////////////////////////////////
    
    
    // $('#a').click(function () {
    //     // 逻辑特别多
    //     var a = 4
    // })

    // $('#b').click(function () {
    //     // 逻辑
    //     var b = 5
    // })

    // $('#c').click(function () {
    //     // 逻辑
    //     var c = 6
    // })

    // $('#d').click(function () {
    //     // 逻辑
    //     var d = 7
    // })


////////////////////下面使用单例模式⬇////////////////////////////////////////////

    var top = { // top区，可以写做一个命名空间
        init: function () {
            this.render()
            this.bind()
        },
        a: 4,
        b: 5,
        c: 6,
        render: function () { // 把所有的DOM元素放在里面
            var me = this // this指的是top
            me.btna = $('#a')
        },
        bind: function () { // 绑定事件
            var me = this
            me.btna.click(function () {
                // 业务逻辑取出去
                me.test() // 不能写做 this.test()，此时的this指的是点击的按钮
            })
        },
        test: function () {
            a = 5
        }
    }

    var banner = { // banner区，可以写做一个命名空间
        init: function () {
            this.render()
            this.bind()
        },
        d: 7,
        e: 8,
        f: 9,
        render: function () {
            var me = this
            me.btna = $('#d')
        },
        bind: function () {
            var me = this
            me.btna.click(function () {
                // 业务逻辑取出去
                me.test()
            })
        },
        test: function () {
            d = 7
            top.a = 6 // 与top进行通信
        }
    }

    top.init()
    banner.init()

</script>

</html>